var svgVisualizer = new Raphael('raphael-svg-container');

// Telerik
var telerikLogoImage = svgVisualizer.image('telerikLogo.png', 10, 140, 290, 110);

var telerikRect = svgVisualizer.rect(10, 10, 290, 110)
    .attr(
    {
        stroke: '#E0FFA3',
        'stroke-width': 2
    });

var logoPath = svgVisualizer.path('M 28 41 l 12 -12 13 13 13 -13 12 12 -5 5 -7 -7 -8 8 13 13 h -9 l -9 -9 -9 9 h -9 l 13 -13 -8 -8 -7 7 z m 7 19 l 18 18 18 -18 h -9 l -9 9 -9 -9 z')
    .attr(
    {
        stroke: '#5CE500',
        fill: '#5CE500'
    });

var telerikText = svgVisualizer.text(86, 58, 'Telerik')
    .attr(
    {
        'text-anchor': 'start',
        'font-family': 'Calibri',
        'fill': '#000000',
        'font-size': 63,
        'font-weight': 'bold'
    });
telerikText.node.id = 'telerik-text';
document.getElementById('telerik-text').setAttribute("style", "letter-spacing: -4");

var telerikTag = svgVisualizer.text(95, 92, "Develop experiences")
    .attr(
    {
        'text-anchor': 'start',
        'font-family': 'Calibri',
        'fill': '#000000',
        'font-size': 27
    });
telerikTag.node.id = 'telerik-tag-text';
document.getElementById('telerik-tag-text').setAttribute("style", "letter-spacing: -2");

var rTrademarkSymbol = svgVisualizer.text(245, 55, '®')
    .attr(
    {
        'font-size': 14
    });

// YouTube
var YouTubeLogoImage = svgVisualizer.image('YouTubeLogo.png', 410, 140, 290, 110);

var youTubeRect = svgVisualizer.rect(410, 10, 290, 110)
    .attr(
    {
        stroke: '#D7EBF0',
        'stroke-width': 2
    });

var youTubeTextYou = svgVisualizer.text(410, 60, 'You')
    .attr(
    {
        'text-anchor': 'start',
        'fill': '#000',
        'font-size': 87
    });
youTubeTextYou.node.id = 'youtube-you-text';
document.getElementById('youtube-you-text').setAttribute("style", "letter-spacing: -12");

var youTubeRedRect = svgVisualizer.rect(532, 21, 156, 88, 22)
    .attr(
    {
        fill: '#EC2828',
        stroke: '#EC2828'
    });

var youTubeTextTube = svgVisualizer.text(535, 60, 'Tube')
    .attr(
    {
        'text-anchor': 'start',
        'fill': '#FFF',
        'font-size': 87
    });
youTubeTextTube.node.id = 'youtube-tube-text';
document.getElementById('youtube-tube-text').setAttribute("style", "letter-spacing: -11");
